To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
We look at how to customize pagination nav links to our page.
Also, we look at how to add popovers.
First and the Last Button
We can add the first-button prop to always include the button for the first page.
And we can use the last-button prop to always include the button for the last page.
For example, we can write:
<template>
<div>
<b-pagination-nav v-model="currentPage" :number-of-pages="pages" base-url="#" first-number></b-pagination-nav>
</div>
</template>
<script>
export default {
data(){
return {
currentPage: 1,
pages: 20
}
}
};
</script>
Then the first page will always be shown since first-number is included.
Button Size
We can change the size prop to change the size of the buttons.
For example, we can write:
<template>
<div>
<b-pagination-nav size="sm" v-model="currentPage" :number-of-pages="pages" base-url="#" first-number></b-pagination-nav>
</div>
</template>
<script>
export default {
data(){
return {
currentPage: 1,
pages: 20
}
}
};
</script>
We have the size prop set to sm to make the buttons smaller than the default.
Also, we can set it to lg to make them larger than the default.
Pill Style
The pills prop can be used to make the buttons look like pills:
<template>
<div>
<b-pagination-nav
pills
v-model="currentPage"
:number-of-pages="pages"
base-url="#"
></b-pagination-nav>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pages: 20
};
}
};
</script>
Alignment
We can use the align prop to align the pagination nav in the position we want.
For example, we can write:
<template>
<div>
<b-pagination-nav align="center" v-model="currentPage" :number-of-pages="pages" base-url="#"></b-pagination-nav>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pages: 20
};
}
};
</script>
Now we put the pagination nav in the center.
Other values include 'right' to align the pagination nav to the right.
'fill' makes the nav fill the screen’s width.
Popover
We can add popovers to our Vue app with BootstrapVue.
It provides us with a tooltip.
We can use the v-b-tooltip directive to add it.
For example, we can write:
<template>
<div id="app" class="text-center">
<b-button v-b-popover.hover.top="'content'" title="Title">Hover Me</b-button>
</div>
</template>
<script>
export default {};
</script>
<style>
#app {
margin: 200px;
}
</style>
We have the v-b-popover component with the top modifier to display the popover on top of the button if there’s room above it.
The value of it is the content.
title is the title of the popover.
Also, we can use the b-popover to add a popover.
To change the title, we can populate the title slot:
<template>
<div id="app" class="text-center">
<b-button id="popover">Hover Me</b-button>
<b-popover target="popover" triggers="hover" placement="top">
<template v-slot:title>Title</template>
<b>content</b>
</b-popover>
</div>
</template>
<script>
export default {};
</script>
<style>
#app {
margin: 200px;
}
</style>
We have the b-popover component.
The button has an id that has to match the target prop’s value.
The triggers prop indicates how the popover is triggered.
placement is set to 'top' to show the popover above the button.
We populate the title content by willing the title slot, which is indicated by v-slot:title .
The rest of the code inside the b-popover component is filled as the content.
Popper.js is used for displaying popups.
Positioning
Possible positing include top , topleft , topright , right , righttop , rightbottom , bottom , bottomleft , bottomright , left , lefttop , and leftbottom .
We can set these values as the value of the placement prop.
Triggers
The triggers for showing popovers can be something other than hover.
For instance, we can change it to focus :
<template>
<div id="app" class="text-center">
<b-button
href="#"
tabindex="0"
v-b-popover.focus="'content'"
title="Title"
>click me</b-button>
</div>
</template>
<script>
export default {};
</script>
<style>
#app {
margin: 200px;
}
</style>
Now we only see the popover only when we click on the button.
Conclusion
We can customize the nav page’s button as we wish.
Also, we can add popovers to display something when we click or hover over an element.
